<template>
	<view class="content" :style="{'background':pageBg}" style="float: left;width: 100%;min-height: 100%;">

		<view class="nav css-theme" :class="[cueTheme]" >
			<scroll-view class="tab-scroll" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
				<view class="tab-scroll_box">
					<view class="tab-scroll_item active" >
						{{timeStr}}<text class="tn-icon-copy-fill" style="margin-left: 5px;" @click="show_copy=true"></text>
					</view>
				</view>

				<view v-if="isActive == 0"
					style="position: absolute;top:15px;right:0px;font-size: 20px;font-weight: bolder;">
					<view class="calendar_info" >
						
						<text @click="goCount()" class="tn-icon-calendar" style="margin-left: 5px;" ></text>
						<text @click="goAchive()" class="tn-icon-cube" style="margin-left: 5px;" ></text>
						<!-- <text class="tn-icon-set" style="margin-left: 5px;" ></text> -->
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 选项卡内容轮播滑动显示，current为当前第几个swiper子项 -->
		<swiper @change="change" :current="isActive" class="swiper-content" :style="fullHeight">

			<!-- 时间线 -->
			<swiper-item class="swiperitem-content">
				<scroll-view scroll-y style="height: 100%;" class="css-theme" :class="[cueTheme]">
					<view class="tb_box_top ">
						<zzx-calendar ref="calendar" style="padding:5px 0px 5px 0px;border-radius: 5px;"
							@selected-change="datechange" :showBack="true" @days-change="dayschange"></zzx-calendar>
						<view style="float: left;width: 80%;margin-left: 18%;">
							<view class="time-line__wrap">
								<tn-time-line>
									<block v-for="(item, index) in expressData" :key="index">
										<tn-time-line-item :top="item.status === 0 ? '' : 2">

											<template slot="node">

												<view class="time-line-item__node"
													:style="{'background-color':getBackgroundColor(item)+' !important'}"
													style="width: 32px;height: 32px">
													<view :style="{'background-color':pageBg}"
														v-if="index == 0 || index>0&&item.startTime != expressData[index-1].startTime"
														style="font-size: 14px;padding: 2px 6px;border-radius: 15px;left: -110rpx;position: absolute;">
														{{item.startTime.replace(":00","")}}
													</view>
													<view class="time-line-item__node--icon  ">
														<view class="u-grid-item-cls">
															<image class="iconClass"
																:src="globalUrl+getIcon(item.icon)">
															</image>
														</view>
													</view>

												</view>
											</template>
											<template slot="content">
												<view style="padding-left: 10px;margin-bottom: 10px;"
													@click="checkThisTimeLine(item)"
													:style="(item.scheduleLog!=null&&item.scheduleLog.status == 1)?'text-decoration: line-through !important;':''">
													<view class="time-line-item__content__desc">
														{{item.startTime.replace(":00","")}}-{{item.endTime.replace(":00","")}}({{item.duration}}分钟)
													</view>
													<view class="time-line-item__content__title overflowclass">
														{{ item.name }}
													</view>
													<view v-if="item.subInfo!='' && item.subInfo.length>0">

														<view class="time-line-item__content__desc"
															v-for="(itemMin, index) in JSON.parse(item.subInfo)"
															:key="'sub'+index">
															<view
																v-if="item.scheduleLog == null || (item.scheduleLog!=null&&item.scheduleLog.status == 0)">

																<view style="float: left;width: 100%;margin-top: 5px"
																	v-if="checkMinLog(item.scheduleLog,index)">
																	<checkbox class="checkbox"
																		:activeBackgroundColor="getBackgroundColor(item)"
																		iconColor="#ffffff"
																		@click.stop="clickCheckbox(item,index,0)"
																		:checked="true">
																	</checkbox>
																	<view
																		:style="(item.scheduleLog!=null&&item.scheduleLog.status == 1)?'text-decoration: line-through !important;':''"
																		style="float: left;width: 85%;"
																		class="overflowclass overflowclassSize">
																		{{itemMin.name}}
																	</view>
																</view>
																<view style="float: left;width: 100%;margin-top: 5px;"
																	v-else>
																	<checkbox class="checkbox"
																		@click.stop="clickCheckbox(item,index,1)"
																		:checked="false">
																	</checkbox>
																	<view
																		:style="(item.scheduleLog!=null&&item.scheduleLog.status == 1)?'text-decoration: line-through !important;':''"
																		style="float: left;width: 85%;"
																		class="overflowclass overflowclassSize">
																		{{itemMin.name}}
																	</view>
																</view>
															</view>
															<view v-else>

																<view style="float: left;width: 100%;margin-top: 5px"
																	v-if="checkMinLog(item.scheduleLog,index)">
																	<checkbox class="checkbox" :checked="true"
																		:disabled="true">
																	</checkbox>
																	<view
																		:style="(item.scheduleLog!=null&&item.scheduleLog.status == 1)?'text-decoration: line-through !important;':''"
																		style="float: left;width: 85%;"
																		class="overflowclass overflowclassSize">
																		{{itemMin.name}}
																	</view>
																</view>
																<view style="float: left;width: 100%;margin-top: 5px"
																	v-else>
																	<checkbox class="checkbox" :checked="false"
																		:disabled="true">
																	</checkbox>
																	<view
																		:style="(item.scheduleLog!=null&&item.scheduleLog.status == 1)?'text-decoration: line-through !important;':''"
																		style="float: left;width: 85%;"
																		class="overflowclass overflowclassSize ">
																		{{itemMin.name}}
																	</view>
																</view>
															</view>
														</view>
													</view>

													<view
														v-if="item.scheduleLog == null || (item.scheduleLog!=null&&item.scheduleLog.status == 0)"
														class="check_btn_icon item_left_text"
														@click.stop="checkedLineTime(item,1)"
														style="border: 2px solid #5A9CFA"></view>
													<view class="check_btn_icon_blue item_left_text tn-icon-check"
														v-else @click.stop="checkedLineTime(item,0)">
													</view>
												</view>
											</template>
										</tn-time-line-item>
									</block>
								</tn-time-line>
							</view>

						</view>
					</view>
				</scroll-view>

			</swiper-item>

			

		</swiper>
		<view v-show="showBackToTodayBtn" v-if="isActive == 0" class="write_btn_top" @tap="goback()">
			<u-icon class="icon" name="arrow-leftward"></u-icon>
		</view>

		<suspenButton centerIcon="/static/add.png" top="80%" left="80%" size="100" :turn="false" v-if="isActive == 0"
			@click="goTimeLine(0)">
		</suspenButton>
		<authpup ref="authpup" type="top" @changeAuth="changeAuth" permissionID="WRITE_CALENDAR"></authpup>

		<!-- 弹出填写标题 -->
		<tn-popup v-model="show" :zIndex="1001" mode="bottom" :borderRadius="20"
			:style="'margin-bottom:'+inputHeight+'px'" :backgroundColor="pageBg">
			<view style="padding: 30rpx 30rpx 10rpx 30rpx; " :style="{'background-color':pageBg}" class="css-theme"
				:class="[cueTheme]">
				<scroll-view scroll-y="" style="width: 100%;display: flex;overflow: hidden;height: 40px;">
					<textarea maxlength="100" style="width: 100%;min-height: 30px;" auto-height v-model="title"
						:focus="focus" @focus="clearOther" :adjust-position="false" placeholder="记录美好~"
						placeholder-class="placeholder_style"> </textarea>
				</scroll-view>
				<view style="margin-top: 20rpx">
					<text class="popup_icon" @click="checkThis(1)">
						<text class="tn-icon-clock"></text>
					</text>
					<text class="popup_icon" v-if="itemClassChecked.icon==undefined" @click="checkThis(2)">
						<text class="tn-icon-more-circle-fill"></text>
					</text>
					<text class="popup_icon" :style="'background-color:'+itemClassChecked.background" v-else
						@click="checkThis(2)">
						<text :class="itemClassChecked.icon"></text>
					</text>
					<text class="popup_icon" :style="'background-color:' + eventLevelColor" @click="checkThis(3)">
						<text class="tn-icon-level"></text>
					</text>
					<view class="popup_icon_float_right" @click="saveDataAuth()">
						<text class="tn-icon-plane-fill"></text>
					</view>
				</view>
				<!-- 等级 -->
				<view v-if="checkThisFlag == 3" style="float: left;width: 100%;margin-top: 20px;">
					<view @click="checkEvent(quadrant)" v-for="(quadrant, index) in quadrants" :key="index"
						style="float: left;width: 100%;padding: 20px 0px;font-size: 16px;">
						<view style="float: left;width: 95%;" :style="'color:'+quadrant.color">{{quadrant.title}}</view>
						<view v-if="eventLevelColor ==quadrant.color" class="tn-icon-success"
							style="float: right;width: 5%;color: #579CF9;font-weight: bolder;"></view>
						<view v-else style="float: right;width: 5%;"></view>
					</view>
				</view>
				<!-- 分类 -->
				<scroll-view scroll-y="true" class="scroll-view_H" v-if="checkThisFlag == 2"
					style="margin-top: 20px;float: left;width: 100%;">
					<u-grid :col="5" :border="false">
						<u-grid-item v-for="(item, index) in itemClassList" @click="selectClass(item)">
							<view style="position: relative;" :style="'background-color:'+item.background"
								:class="item.icon" class="u-grid-item-cls" @longpress="goDelClass(item)">
								<view v-if="itemClassChecked.id == item.id" class="tn-icon-success-circle-fill"
									style="position: absolute;top:-15px;right: -10px;border-radius: 30px;"
									:style="'color:'+item.background"></view>
							</view>
							<view class="grid-text">{{item.name}}</view>
						</u-grid-item>
						<u-grid-item @click="goAdd()">
							<view style="background-color:#ccc" class="u-grid-item-cls tn-icon-add">
							</view>
							<view class="grid-text">添加</view>
						</u-grid-item>
					</u-grid>
				</scroll-view>
			</view>
		</tn-popup>
		<!-- 日历 -->
		<u-calendar-display z-index="1002" max-date="2200-11-23" @myCalendarEvent="myCalendarEvent"
			v-model="showCalendar" :closeable="false" :mode="modeCalendar" @repeatIdDisplay="repeatIdDisplay"
			@pickTime="pickTime" @change="changeCalendar"></u-calendar-display>

		<!-- 选择标签 -->
		<mypopup title="" :mask="false" v-model="show_right" height="1000rpx" :showHeader="false"
			style="position: relative;z-index: 1003;" class="css-theme" :class="[cueTheme]">

			<view
				style="width: 60px;height: 10rpx;background-color: #ccc;position: absolute; top:5px;margin-left: 320rpx;border-radius: 20px;">
			</view>
			<view class="container_box" style="margin-top: 10px;">
				<view style="float: left;padding-left: 10px;" @click="cancel">取消</view>
				<view style="float: right;color: #2B95FD;padding-right: 10px;" @click="confirm">确定</view>
			</view>

			<view class="container_box" style="margin-top: 10px;">
				<view class="container_box_left">
					<input v-model="className" type="text" placeholder="请输入分类名称"
						placeholder-class="placeholder_style" />
				</view>
			</view>
			<view class="popup-content">
				<view class="input-container">

					<view class="contentnav">
						<view class="nav1">
							<scroll-view class="tab-scroll1" scroll-x="true" scroll-left="0">
								<view class="tab-scroll_box1">
									<view class="tab-scroll_item1" v-for=" (item,index) in itemColorList" :key="index"
										@tap="checkThisColor(item.index,item.background)">
										<view class="color_style" :style="'background-color:'+item.background">
											<text v-if="checkedIndex == item.index" class="checkmark"></text>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>

					</view>
				</view>
				<view class="input-container">

					<scroll-view class="scroll-view_H2" scroll-x="true" scroll-left="0">
						<text style="text-align: center;" @tap="checkIcon(index,val)" v-for="(val,index) in iconList"
							:key="index">
							<text v-if=" index % 16 === 0"><br /></text>
							<text v-if="checkedIconIndex===index" class="activeText emojifont" :class="val"
								:style="'background-color:'+backgroundIndex">
							</text>
							<text v-else class="normalText emojifont" :class="val"
								:style="'background-color:'+backgroundIndex">
							</text>
						</text>
					</scroll-view>
				</view>
			</view>
		</mypopup>



		<!-- 时间线操作 -->
		<mypopup title="" :mask="false" v-model="show_popup_timeLine" height="230rpx" :showHeader="false"
			style="position: relative;z-index: 1004;" class="css-theme" :class="[cueTheme]">
			<view
				style="width: 60px;height: 10rpx;background-color: #ccc;position: absolute; top:5px;margin-left: 320rpx;border-radius: 20px;">
			</view>
			<view class="nav-list-popup " style="padding: 80rpx 100rpx 40rpx 100rpx;">

				<block>
					<view @click="goTimeLine(1)"
						class="nav-list-item tn-shadow-blur tn-cool-bg-image tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-between">
						<view class="tn-icon-write icon-order">
						</view>
						<view class="nav-link">
							<view class='title'>编辑</view>
						</view>
					</view>
				</block>
				<block>
					<view @click="goTimeLineCopy()"
						class="nav-list-item tn-shadow-blur tn-cool-bg-image tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-between">
						<view class="tn-icon-copy icon-order">
						</view>
						<view class="nav-link">
							<view class='title'>复制</view>
						</view>
					</view>
				</block>
				<block>
					<view @click="goDelTimeLine()"
						class="nav-list-item tn-shadow-blur tn-cool-bg-image tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-between">
						<view class="tn-icon-delete icon-order">
						</view>
						<view class="nav-link">
							<view class='title'>删除</view>
						</view>
					</view>
				</block>
				<!-- <block>
					<view @click="goCountDown()"
						class="nav-list-item tn-shadow-blur tn-cool-bg-image tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-between">
						<view class="tn-icon-delete icon-order">
						</view>
						<view class="nav-link">
							<view class='title'>详情</view>
						</view>
					</view>
				</block> -->
			</view>

		</mypopup>

		<tn-modal v-model="modal_show" @click="delModalClick"></tn-modal>
		<tn-modal v-model="modal_show_class" @click="delModalClickClass"></tn-modal>
		<tn-modal v-model="modal_show_timeLine" @click="delModalClickTimeLine"></tn-modal>

		<tn-popup v-model="show_popup" mode="bottom" :borderRadius="15" :backgroundColor="pageBg">


			<view :style="{'background-color':pageBg}" class="container_box_pop css-theme" :class="[cueTheme]"
				@click="matterHistoryPage()">
				<view class="container_box_left_pop">
					<view class="tn-icon-calendar" style="font-size: 20px;"></view>
					<view class="flex-item" style="margin-left: 10px;font-size: 15px;">已完成事项</view>
					<view class="tn-icon-right flex-item image_v" style="font-size: 18px;">
					</view>
				</view>
			</view>

		</tn-popup>


		<tn-popup v-model="show_popup_center" mode="center" width="690rpx" :borderRadius="20" :backgroundColor="pageBg">

			<view :style="{'background-color':pageBg}" style="padding: 10px 10px;margin:0px 0px;"
				class="container_box css-theme" :class="[cueTheme]" @click="deleteSchedule(0)">
				<view class="container_box_left" style="justify-content: center;margin:0px">
					<view class="flex-item">删除当前任务</view>
				</view>
			</view>
			<view :style="{'background-color':pageBg}"
				style="padding: 10px 10px;border-top: 1px solid #f1f1f1;margin:0px 0px;" class="container_box css-theme"
				:class="[cueTheme]" @click="deleteSchedule(1)">
				<view class="container_box_left" style="justify-content: center;margin:0px">
					<view class="flex-item">删除所有未来任务</view>
				</view>
			</view>
			<view :style="{'background-color':pageBg}"
				style="padding: 10px 10px;border-top: 1px solid #f1f1f1;margin:0px 0px;" class="container_box css-theme"
				:class="[cueTheme]" @click="deleteSchedule(2)">
				<view class="container_box_left" style="justify-content: center;margin:0px">
					<view class="flex-item">删除所有任务</view>
				</view>
			</view>
			<view :style="{'background-color':pageBg}"
				style="padding: 10px 10px;border-top: 1px solid #f1f1f1;margin:0px 0px;" class="container_box css-theme"
				:class="[cueTheme]" @click="show_popup_center = false">
				<view class="container_box_left" style="justify-content: center;font-weight: bolder;margin:0px">
					<view class="flex-item">取消</view>
				</view>
			</view>
		</tn-popup>
		<tn-popup :closeBtn="true" v-model="show_copy"  mode="center" width="600rpx" :borderRadius="20" :backgroundColor="pageBg" :zIndex="888">


			<view class=" css-theme" :class="[cueTheme]" style="padding: 30px;line-height: 30px;" :style="'backgroundColor:'+pageBg">
				<view>复制{{nowDate}}这一天的任务，至</view>
				<picker mode="date" @change="onDateChange" style="width: 100%;float:left;z-index: 99999;font-weight: bolder;">
					<text  style="width: 100%;float:left">{{toDate==''?getToDate():toDate}}<text style="margin-left: 5px;" class="tn-icon-edit-write"></text></text>
					
				</picker>
				<view style="font-size:12px;color: #ccc;">重复的任务不会被复制</view>
				<view class="category-item-save">
					<view class="save_btn" @click="saveCopy()">复制全天</view>
				</view>
			</view>
		</tn-popup>

	</view>
</template>
<script>
	var _self;
	import mypopup from '@/components/hqs-popup/hqs-popup.vue'
	import icons from '@/common/icon.js'
	import mytime from '@/common/mytime.js'
	import dayjs from '@/dayjs.min.js'
	import syscalendar from '@/common/sysCalender.js';
	import zzxCalendar from "@/my-components/zzx-calendar-target/zzx-calendar.vue"
	import suspenButton from '@/components/px-suspen-button/index.vue'
	export default {
		name: 'Matter',
		components: {
			mypopup,
			zzxCalendar,
			suspenButton
		},
		watch: {
			// swiper与上面选项卡联动
			currentindex(newval) {
				this.isActive = newval;
				this.scrollLeft = 0;
				// 滑动swiper后，每个选项距离其父元素最左侧的距离
				for (let i = 0; i < newval - 1; i++) {
					this.scrollLeft += this.category[i].width
				};
			},

		},
		data() {
			return {
				globalUrl: getApp().globalData.url,
				showBackToTodayBtn: false,
				modal_show: false,
				modal_show_class: false,
				modal_show_timeLine: false,
				show_popup_center: false,
				show_popup: false,
				show_copy: false,
				id: '',
				itemCheck: {},
				mytime: mytime,
				itemMatterList: [

				],
				focus: true,
				//保存
				user: [],
				categoryId: '',
				title: '',
				startTime: '',
				endTime: '',
				repeatId: 0, //重复id
				typeId: 1, //四象限类型
				spendTime: '',
				matterRepeat: {
					type: 0,
					repeatDays: ''
				},
				//日历
				modeCalendar: 'date',
				showCalendar: false,
				//日历结束
				activeText: 'activeText',
				normalText: 'normalText',
				checkedIconIndex: 0,
				checkedIcon: 'tn-icon-order',
				backgroundIndex: '#F8BCB1',
				checkedIndex: 0,
				className: '',
				classId: '',

				checkThisFlag: 0,
				itemClassList: [],
				itemColorList: icons.colorList,
				iconList: icons.iconsMatter,
				iconSkyList: icons.iconsSky,
				content: '',
				inputHeight: 0,
				// 弹窗
				show: false,
				show_right: false,
				show_bottom_list_item: false,
				show_popup_check_bottom_detail: false,
				show_popup_check_bottom_level: false,
				show_popup_timeLine: false,
				mode: 'bottom',
				backgroundColor: '',
				width: '',
				height: '30%',
				borderRadius: 20,


				isActive: 0,
				index: 0,
				currentindex: 0,
				gridList: [],
				category: [{
						id: 0,
						name: '时间线',
					},

				],
				contentScrollW: 0, // 导航区宽度
				scrollLeft: 0, // 横向滚动条位置
				fullHeight: "",
				


				eventLevelColor: '#E92228',
				items: [],
				itemClassChecked: {},
				checkThingCheckedDetail: {},
				pickTimeStr: '',
				delItem: {},
				needCalendar: true,

				expressData: [

				],
				nowDate: '',
				iconCategory: icons.iconCategory,
				iconImgList: [],
				itemCheckTimeLine: {},
				toDate: '',
			}
		},
		onShow() {
			uni.onKeyboardHeightChange(this.onKeyboardHeightChange);

			uni.getStorage({
				key: 'user',
				success: function(res) {
					if (res.data) {
						_self.user = res.data
						setTimeout(function() {

							_self.getList()
							_self.getListCatetory()
							_self.getTimeLineList()
						}, 200);
					}
				},
				fail: function(e) {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			})
			this.$nextTick(() => {
				this.$refs.calendar.initDate()
			});

		},
		onLoad(options) {
			_self = this
			console.log(this.itemColorList)
			this.startTime = dayjs().format('YYYY-MM-DD')
			this.nowDate = dayjs().format('YYYY-MM-DD')
			this.timeStr = dayjs().format('YYYY/MM')
			this.getIconList()


		},
		onUnLoad() {
			uni.offKeyboardHeightChange(this.onKeyboardHeightChange)
		},
		mounted() {
			var that = this;
			//获取手机屏幕的高度，让其等于swiper的高度，从而使屏幕充满
			uni.getSystemInfo({
				success: function(res) {
					that.fullHeight = "height:" + res.windowHeight + "px";
				}
			});
		},
		// 下拉监听
		onPullDownRefresh() {
			uni.showNavigationBarLoading(); // 头部标题刷新
			_self.getList()
		},
		computed: {
			showBackToTodayBtnMonth() {

			},

		},
		methods: {
			getToDate() {
				let date = new Date(this.nowDate.replace(/-/g, '/')); 
				// 给日期增加一天
				date.setDate(date.getDate() + 1);

				// 格式化日期对象为字符串（YYYY-MM-DD）
				let year = date.getFullYear();
				let month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份从0开始，需要加1
				let day = ('0' + date.getDate()).slice(-2);
				return `${year}-${month}-${day}`;
			},
			saveCopy() {
				var data = {
					fromDay:this.nowDate,
					toDay:this.toDate == ''?this.getToDate():this.toDate
				}
				console.log(data)
				this.show_copy = false
				this.toDate = ''
				this.$api.copyScheduleCopy(data).then((res) => {
					var resData = res;
					if (resData.code == "200") {
						uni.showToast({
							title: "已复制",
							duration: 2000,
							icon: "none"
						});
					}
				})
			},
			onDateChange(event) {
				this.toDate = event.mp.detail.value;
			},
			goCountDown() {
				uni.navigateTo({
					url: '/pages/tarbar/timeLineCountDown'
				});
			},
			
			goCount(){
				uni.navigateTo({
					url: '/pages/tarbar/trendMarkTimes'
				});
			},
			goAchive(){
				uni.navigateTo({
					url: '/pages/tarbar/archive'
				});
			},
			getBackgroundColor(item) {
				if (item.scheduleLog != null && item.scheduleLog.status == 1) {
					return '#CCCCCC'
				} else {
					return item.color
				}
			},
			goArchiveTimeLine() {
				uni.navigateTo({
					url: '/pages/tarbar/archiveTimeLine'
				});
			},
			getIconList() {
				var nums = ""
				for (var i = 0; i < _self.iconCategory.length; i++) {
					var id = _self.iconCategory[i].ids
					if (i == 0) {
						nums = nums + id
					} else {
						nums = nums + "," + id
					}
				}
				var data = {
					types: nums,
				}
				this.$api.listHabitIcon(data).then((res) => {
					var resData = res;
					if (resData.code == "200") {
						_self.iconImgList = resData.data;
					}
				})
			},
			getIcon(checkedIconIndex) {
				var checkedIcon = ""
				// console.log(checkedIconIndex)
				for (var i = 0; i < _self.iconImgList.length; i++) {
					if (checkedIconIndex == _self.iconImgList[i].id) {
						checkedIcon = _self.iconImgList[i].url
						break;
					}

				}
				return checkedIcon;
			},

			getTimeLineList() {
				var data = {
					userId: _self.user.id,
					time: _self.nowDate
				}
				console.log(data)
				this.$api.listSchedule(data).then((res) => {
					var resData = res;
					if (resData.code == "200") {
						console.log("=============listSchedule====================")
						console.log(resData.data)

						if (resData.data.length > 0) {
							_self.expressData = resData.data
						} else {
							_self.expressData = []
						}
					}
				})
			},

			checkThisTimeLine(item) {

				this.show_popup_timeLine = true;
				this.itemCheckTimeLine = item


			},
			goDelTimeLine() {

				this.show_popup_center = true

			},
			delModalClickTimeLine(e) {
				this.modal_show_timeLine = false;
				if (e.index == 1) {
					_self.$api.deleteSchedule({}, _self.itemCheckTimeLine.id).then((res) => {
						var resData = res;
						if (resData.code == "200") {
							_self.getList()
						}
					})
				}
				_self.show_popup_timeLine = false;
			},

			deleteSchedule(type) {
				this.show_popup_center = false
				_self.show_popup_timeLine = false
				var data = {}
				if (_self.itemCheckTimeLine.scheduleLog != null) {
					data = {
						id: _self.itemCheckTimeLine.scheduleLog.id,
						type: type,
						scheduleId: _self.itemCheckTimeLine.id,
						time: this.nowDate
					}
				} else {
					data = {
						type: type,
						scheduleId: _self.itemCheckTimeLine.id,
						time: this.nowDate
					}
				}

				console.log(data)
				_self.$api.deleteSchedule(data).then((res) => {
					console.log(res)
					var resData = res;
					if (resData.code == "200") {
						_self.getTimeLineList()
					}
				})
			},
			goTimeLine(item) {

				_self.show_popup_timeLine = false;
				if (item == 0) {

					if (_self.user.member == 1) {
						uni.navigateTo({
							url: '/pages/tarbar/addTimeLine?userId=' + _self.user.id + "&id=0&time=" + this
								.nowDate
						});

					} else {

						_self.$api.getScheduleAppAll({}).then((res) => {
							var resData = res;
							if (resData.code == "200") {
								console.log("========getScheduleAppAll============")
								console.log(res.data)
								if (res.data.length >= 1) {
									uni.showToast({
										title: "非会员只能增加一条数据",
										duration: 2000,
										icon: "none"
									});
								} else {
									uni.navigateTo({
										url: '/pages/tarbar/addTimeLine?userId=' + _self.user.id +
											"&id=0&time=" + this
											.nowDate
									});
								}
							}
						})

					}

				} else {
					uni.navigateTo({
						url: '/pages/tarbar/addTimeLine?userId=' + _self.user.id + "&time=" + this.nowDate +
							'&id=' + this.itemCheckTimeLine.id
					});
				}



			},
			goTimeLineCopy(){
				_self.show_popup_timeLine = false;
				uni.navigateTo({
					url: '/pages/tarbar/addTimeLine?userId=' + _self.user.id + "&time=" + this.nowDate +
						'&id=' + this.itemCheckTimeLine.id+"&copystatus=1"
				});
			},
			//标记完成
			checkedLineTime(item, type) {

				var data = {}
				if (type == 1) {
					if (item.scheduleLog == null) {
						data = {
							scheduleId: item.id,
							userId: this.user.id,
							time: this.nowDate,
							status: 1
						}
					} else {
						data = {
							id: item.scheduleLog.id,
							status: 1,
						}
					}

				} else {
					data = {
						id: item.scheduleLog.id,
						status: 0,
					}
				}


				this.$api.appChangeSchedule(data).then((res) => {
					var resData = res;
					if (resData.code == "200") {
						_self.getTimeLineList()
					}
				})


			},

			clickCheckbox(item, index, type) {

				var data = {}
				var subInfo = ""
				if (item.scheduleLog == null) {
					subInfo = JSON.parse(item.subInfo)
					if (type == 1) {
						subInfo[index].status = 1
					} else {
						subInfo[index].status = 0
					}
					data = {
						scheduleId: item.id,
						userId: this.user.id,
						time: this.nowDate,
						subInfo: JSON.stringify(subInfo),
						status: 0
					}

				} else {
					subInfo = JSON.parse(item.subInfo)
					var subInfoLog = {}
					if (item.scheduleLog.subInfo != null && item.scheduleLog.subInfo != "") {
						subInfoLog = JSON.parse(item.scheduleLog.subInfo)
					}

					var num = 0
					subInfo.forEach(item => {
						if (subInfoLog[num] !== undefined) {
							subInfo[num].status = subInfoLog[num].status
						}
						num++
					});


					if (type == 1) {
						subInfo[index].status = 1
					} else {
						subInfo[index].status = 0
					}
					data = {
						id: item.scheduleLog.id,
						subInfo: JSON.stringify(subInfo),
					}

				}
				console.log(data)
				this.$api.appChangeSchedule(data).then((res) => {
					var resData = res;
					console.log(resData)
					if (resData.code == "200") {
						_self.getTimeLineList()
					}
				})
			},

			checkMinLog(scheduleLog, index) {


				if (scheduleLog == null) {
					return false
				} else {
					if (scheduleLog.subInfo != null && scheduleLog.subInfo != "") {
						var sub = JSON.parse(scheduleLog.subInfo)
						if (sub[index] && 'status' in sub[index] && sub[index].status == 1) {
							return true
						} else {
							return false
						}
					} else {
						return false
					}
				}

			},

			dayschange(e) {
				console.log("============1====================")
				console.log(e)
				this.showBackToTodayBtn = e
			},
			goback() {
				this.$refs.calendar.goback()
			},

			datechange(e) {

				console.log("===========2=====================")
				console.log(e)
				this.nowDate = e.fullDate
				this.timeStr = this.nowDate.split("-")[0] + "/" + this.nowDate.split("-")[1]
				this.getTimeLineList()
			},
			//==========================下面是四象限=============================


			showSetting() {
				this.show_popup = true
			},
			matterHistoryPage() {
				this.show_popup = false
				uni.navigateTo({
					url: '/pages/tarbar/matterHistory'
				});
			},
			showOperate() {
				_self.show_popup_check_bottom_detail = true
			},
			showLevel() {
				_self.show_popup_check_bottom_level = true
			},
			confirm() {
				_self.show_right = false
				_self.saveClassData()
			},
			cancel() {
				_self.show_right = false
			},
			selectClass(item) {
				_self.itemClassChecked = item
				this.focus = false
				this.$nextTick(() => {
					this.focus = true
				})
			},
			//获取事项数据
			getList() {
				var data = {
					userId: _self.user.id
				}
				this.$api.listMatter(data).then((res) => {
					var resData = res;
					uni.stopPullDownRefresh(); // 停止下拉刷新
					uni.hideNavigationBarLoading();
					if (resData.code == "200") {
						_self.quadrants[0].tasks = []
						_self.quadrants[1].tasks = []
						_self.quadrants[2].tasks = []
						_self.quadrants[3].tasks = []

						for (var i = resData.data.length - 1; i >= 0; i--) {

							if (resData.data[i].typeId == 1) {
								_self.quadrants[0].tasks.push(resData.data[i])
							} else if (resData.data[i].typeId == 2) {
								_self.quadrants[1].tasks.push(resData.data[i])
							} else if (resData.data[i].typeId == 3) {
								_self.quadrants[2].tasks.push(resData.data[i])
							} else if (resData.data[i].typeId == 4) {
								_self.quadrants[3].tasks.push(resData.data[i])
							}
						}
					}
				})

			},
			goDelClass(item) {
				this.delItem = item
				if (this.delItem.id != 1 && this.delItem.id != 2) {
					this.modal_show_class = true;
				}

			},
			delModalClickClass(e) {
				this.modal_show_class = false;
				if (e.index == 1) {
					_self.$api.deleteMatterType({}, this.delItem.id).then((res) => {
						var resData = res;
						if (resData.code == "200") {
							_self.getListCatetory();
						}
					})
				}
			},

			//获取分类
			getListCatetory() {
				var data = {
					userId: _self.user.id
				}
				this.$api.listMatterType(data).then((res) => {
					var resData = res;

					if (resData.code == "200") {
						_self.itemClassList = resData.data;

						if (_self.itemClassChecked.icon == undefined) {
							for (var i = 0; i < resData.data.length; i++) {
								if (resData.data[i].id == 1) {
									_self.itemClassChecked = resData.data[i]
									break;
								}
							}
						}
					}
				})

			},
			getTypeColor(typeId) {
				var color = ""
				for (var i = 0; i < _self.itemClassList.length; i++) {
					if (_self.itemClassList[i].id == typeId) {
						color = _self.itemClassList[i].background
						break;
					}
				}
				return color
			},

			//设置日历
			setCalendar() {
				// 1.新增日历事件 (日历的日历事件并设定提醒、描述中填入需要跳转的URL、事件的标题)
				var title = ""
				var subtitle = ""
				var description = ""
				var dtstart = ""
				var dtend = ""
				var inAdvance = 1 //提前一分钟提醒
				var rrule = '' //每天发生一次，直到永远：

				title = "拾光记-事项提醒"
				subtitle = "宝子，" + _self.title + "到了"

				if (_self.matterRepeat.type == 0) { //'不重复提醒'
					rrule = ''
				} else if (_self.matterRepeat.type == 1) { //'每天重复提醒'
					rrule = 'FREQ=DAILY;INTERVAL=1'
				} else if (_self.matterRepeat.type == 2) { //'每周重复提醒'
					var arr = _self.matterRepeat.repeatWeeks.split(",")
					var days = ""
					for (var i = 0; i < arr.length; i++) {
						if (i == 0) {
							days += mytime.getWeekByCalendar(arr[i] - 1)
						} else {
							days += "," + mytime.getWeekByCalendar(arr[i] - 1)
						}
					}

					rrule = 'FREQ=WEEKLY;WKST=SU;BYDAY=' + days
				} else if (_self.matterRepeat.type == 3) { //'每月重复提醒'
					rrule = 'FREQ=MONTHLY;BYMONTHDAY=' + _self.matterRepeat.repeatMonths
				} else if (_self.matterRepeat.type == 4) { //'每年重复提醒'
					var arr = _self.matterRepeat.repeatYear.split(",")
					var month = ""
					var monthday = ""
					for (var i = 0; i < arr.length; i++) {
						console.log(arr[i])
						if (i == 0) {
							month += arr[i].split("-")[0].replace(/^0+/, '')
							monthday += arr[i].split("-")[1].replace(/^0+/, '')
						} else {
							month += "," + arr[i].split("-")[0].replace(/^0+/, '')
							monthday += "," + arr[i].split("-")[1].replace(/^0+/, '')
						}
					}

					rrule = 'FREQ=YEARLY;BYMONTH=' + month + ';BYMONTHDAY=' + monthday
					console.log(rrule)

				}
				//开始时间
				// 解析时间字段
				var parts = _self.pickTimeStr.split(':');
				var hours = parseInt(parts[0], 10); // 小时
				var minutes = parseInt(parts[1], 10); // 分钟

				// 获取当前日期
				var currentDate = new Date(_self.startTime);

				// 设置时间为每天的指定小时和分钟
				currentDate.setHours(hours, minutes, 0, 0);

				// 获取时间戳
				dtstart = currentDate.getTime();
				dtend = dtstart + 1000 * 60 * 60 * 1; //一个小时后结束

				syscalendar.addEvent({
					title: title,
					subtitle: subtitle,
					description: description,
					dtstart: dtstart,
					dtend: dtend,
					inAdvance: inAdvance,
					rrule: rrule,
				}).then(result => {
					if (result == -1) {
						_self.save("")
					} else {
						_self.save(result)
					}

				}).catch(error => {

					_self.save("")
					console.error(error); // 处理错误
				});


			},
			changeAuth() {
				this.saveData()
			},
			saveDataAuth() {
				if (uni.getSystemInfoSync().platform == 'ios') {
					this.changeAuth()
				} else if (uni.getSystemInfoSync().platform == 'android') {
					this.$refs['authpup'].open()
				}
			},
			//保存事项
			saveData() {

				if (_self.title == '') {
					return;
				}
				if (_self.matterRepeat.type == 2 && _self.matterRepeat.repeat_weeks == '') {
					uni.showToast({
						title: "请选择日期",
						icon: 'none'
					});
					return
				}
				if (_self.matterRepeat.type == 3 && _self.matterRepeat.repeat_months == '') {
					uni.showToast({
						title: "请选择日期",
						icon: 'none'
					});
					return
				}
				if (_self.matterRepeat.type == 4 && _self.matterRepeat.repeat_years == '') {
					uni.showToast({
						title: "请选择日期",
						icon: 'none'
					});
					return
				}

				//关闭弹出
				_self.show = false


				if (uni.getSystemInfoSync().platform == 'ios') {
					_self.save("")
				} else if (uni.getSystemInfoSync().platform == 'android') {
					this.setCalendar()
				}





			},
			save(event_id) {

				if (_self.matterRepeat.type == 1 || _self.matterRepeat.type == 0) {

					_self.matterRepeat.repeatDays = _self.startTime

				}
				var data = {}
				if (_self.id == '') {
					data = {
						userId: _self.user.id,
						categoryId: _self.itemClassChecked.id,
						title: _self.title,
						startTime: _self.startTime + " " + this.pickTimeStr,
						warnTime: this.pickTimeStr,
						endTime: _self.endTime,
						matterRepeat: _self.matterRepeat,
						typeId: _self.typeId, //四象限类型
						eventIds: event_id, //本地日历id
					}
				} else {
					data = {
						id: _self.id,
						userId: _self.user.id,
						categoryId: _self.itemClassChecked.id,
						title: _self.title,
						startTime: _self.startTime + " " + this.pickTimeStr,
						warnTime: this.pickTimeStr,
						endTime: _self.endTime,
						matterRepeat: _self.matterRepeat,
						typeId: _self.typeId, //四象限类型
						eventIds: event_id, //本地日历id
					}
				}

				console.log("==================11===============")
				console.log(data)
				//清除数据，
				_self.title = ''
				this.$api.updateMatter(data).then((res) => {
					var resData = res;
					console.log(resData)
					if (resData.code == "200") {
						_self.getList()
					}
				})
			},
			//保存分类
			saveClassData() {
				if (_self.className == '') {
					return;
				}
				var data = {}
				if (_self.classId == '') {
					data = {
						userId: _self.user.id,
						name: _self.className,
						icon: _self.checkedIcon,
						background: _self.backgroundIndex
					}
				} else {
					data = {
						id: _self.id,
						userId: _self.user.id,
						name: _self.className,
						icon: _self.checkedIcon,
						background: _self.backgroundIndex
					}
				}
				this.$api.updateMatterType(data).then((res) => {
					var resData = res;
					if (resData.code == "200") {
						_self.getListCatetory()
					}
				})

			},
			goDel() {
				this.modal_show = true;
			},
			delModalClick(e) {
				this.modal_show = false;
				if (e.index == 1) {
					_self.$api.deleteMatter({}, _self.checkThingCheckedDetail.id).then((res) => {
						var resData = res;
						if (resData.code == "200") {
							_self.getList()
						}
					})
				}
				_self.show_popup_check_bottom_detail = false
				_self.show_popup_check_bottom_level = false
				_self.show_bottom_list_item = false
			},

			myCalendarEvent(data) {
				this.modeCalendar = data
				console.log("=======================")
				console.log(data);
			},

			changeCalendar(e) {
				console.log("=======================")
				//让输入获取焦点
				console.log(e);
				if (e.result) {
					this.startTime = e.result
				} else {
					this.startTime = e.startDate
					this.endTime = e.endDate
				}
				this.focus = false
				this.$nextTick(() => {
					this.focus = true
				})
			},
			repeatIdDisplay(e) {
				console.log(e)
				this.matterRepeat = e
			},
			pickTime(e) {
				console.log("=============pickTime============")
				console.log(e)
				this.pickTimeStr = e + ":00"

			},
			checkThis(type) {
				this.checkThisFlag = type

				if (type == 1) {
					_self.showCalendar = true
				}
			},
			checkThisColor(index, background) {
				this.checkedIndex = index
				this.backgroundIndex = background
			},
			clearOther() {
				this.checkThisFlag = 0
			},
			checkIcon(index, val) {
				this.checkedIcon = val
				this.checkedIconIndex = index

			},


			showPopup() {
				this.show_right = true
			},


			checkEvent(item) {
				this.eventLevelColor = item.color
				this.typeId = item.id
				this.focus = false
				this.$nextTick(() => {
					this.focus = true
				})
			},
			onKeyboardHeightChange(res) {
				const {
					height,
					duration
				} = res;

				let _sys = uni.getSystemInfoSync();
				let _heightDif = _sys.screenHeight - _sys.windowHeight
				let _diff = height - _heightDif

				console.log(_heightDif + "====" + _diff)
				if (_diff > 0) {
					if (uni.getSystemInfoSync().platform == 'ios') {
						this.inputHeight = _diff;
					} else if (uni.getSystemInfoSync().platform == 'android') {
						this.inputHeight = 0;
					}
				} else {
					this.inputHeight = 0;

				}
			},

			handleCheckboxChange(quadrantIndex, taskIndex) {
				this.quadrants[quadrantIndex].tasks[taskIndex].completed = !this.quadrants[quadrantIndex].tasks[taskIndex]
					.completed;
			},
			toggleInput(toggleInput) {
				this.show = true
				console.log(toggleInput)
				this.typeId = toggleInput.id
				this.eventLevelColor = toggleInput.color

			},


			// 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
			chenked(index) {
				this.isActive = index;
				this.scrollLeft = 0;
				for (let i = 0; i < index - 1; i++) {
					this.scrollLeft += this.category[i].width
				};
			},
			// swiper滑动时，获取其索引，也就是第几个
			change(e) {
				const {
					current
				} = e.detail;
				this.currentindex = current;
			},

			goAdd() {
				this.className = ''
				this.show_right = true
			},



			checkThingDetail(item) {

				uni.navigateTo({
					url: '/pages/tarbar/matterDetail?item=' + JSON.stringify(item)
				});
			},
			//标记完成
			checkedThing(item, type) {
				this.checkThingCheckedDetail = item

				var data = {}
				console.log(dayjs().format('YYYY-MM-DD HH:mm:ss'))
				if (type == 1) {
					data = {
						id: item.id,
						completeTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
						isComplete: 1,
					}
					this.checkThingCheckedDetail.isComplete = 1
				} else {
					data = {
						id: item.id,
						completeTime: '',
						isComplete: 0,
					}
					this.checkThingCheckedDetail.isComplete = 0
				}

				this.updateDatas(data)
			},


			updateDatas(data) {
				this.$api.updateMatter(data).then((res) => {
					var resData = res;
					if (resData.code == "200") {
						_self.getList()
					}
				})

			},


		}
	}
</script>
<style lang="scss">
	page {
		height: 100%;
		width: 100%;
		margin: 0;
		display: flex;
		background-color: $page-bg !important;
	}

	.tn-popup--bottom {
		background-color: $page-bg !important;
	}

	.css-theme {
		@include text-color();
		@include base-background();
		@include border-color();
		@include shadow-color();
	}


	.checkedIcon {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background-color: antiquewhite;
		line-height: 50px;
		text-align: center;
		font-size: 20px;
		display: inline-block;
	}

	.activeText {
		font-size: 32px;
		opacity: 1;
		margin-bottom: 10px;
		text-align: center;
	}

	.normalText {
		font-size: 32px;
		opacity: 0.5;
		margin-bottom: 10px;
		text-align: center;
	}

	.grid-title {
		font-size: 14px;
		font-weight: bold;
		width: 100%;
		float: left;
		padding: 2px 8px;
	}

	.grid-content {
		font-size: 13px;
		width: 100%;
		float: left;
		padding: 2px 8px;
	}

	.u-grid-item-class {
		height: 160px;

	}

	.grid-text {
		text-align: left !important;
		align-items: left !important;
	}

	.quadrant {
		width: 47%;
		margin-top: 2%;
		height: 47%;
		float: left;
		margin-left: 2%;
		font-size: 12px;
		border-radius: 5px;
		background-color: #ffffff;
	}

	.header {
		display: flex;
		align-items: center;

		cursor: pointer;
		background-color: #007bff;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		height: 8%;
	}

	.title {

		padding: 3px 5px;
		text-align: left;
	}


	.icon_right {
		width: 20px;
		height: 20px;
		margin-left: auto;
		margin-right: 1px;

	}

	.tasks {
		float: left;
		width: 100%;
		height: 100%;

	}

	.task {
		display: flex;
		align-items: center;
		padding: 0rpx 18rpx;
		margin-top: 20rpx;
		float: left;
		width: 100%;

	}


	.checkbox {
		float: left;
		width: 15%;
		transform: scale(0.8);
	}


	.input {
		width: 100%;
	}

	.add-button {
		background-color: #007bff;
		color: white;
		padding: 5px 10px;
		border: none;
		cursor: pointer;
	}

	.zxh_view {
		float: left;
		width: 100%;
		margin-top: 30rpx;
		line-height: 36rpx;
		margin-bottom: 20rpx;

	}

	.zxh_view_left {
		float: left;
		margin-left: 30rpx;
		width: 10rpx;
		height: 36rpx;
		background-color: #5A9CFA;
	}

	.zxh_view_right {
		float: left;
		margin-left: 20rpx;
		font-size: 16px;
		font-weight: bold;
		color: #000;
	}

	.uni-page-head {
		display: none;
	}

	.container {
		padding: 20px;
	}



	.category-item {
		width: 49%;
		margin-bottom: 8px;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px;
		background-color: #FFFFFF;
		border-radius: 8px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.category-icon {
		width: 40px;
		height: 40px;
		margin-right: 10px;
	}

	.category-name {
		font-size: 14px;
	}

	.content {
		display: flex;
		flex-direction: column;
		width: 100%;
		flex: 1;
		padding-top: 70rpx;
		background-color: $page-bg !important;

		.nav {  
			position: fixed;
			z-index: 99;
			width: 100%;
			align-items: center;
			height: 100rpx;

			.tab-scroll {
				flex: 1;
				overflow: hidden;
				box-sizing: border-box;
				padding-left: 30rpx;
				padding-right: 30rpx;

				.tab-scroll_box {
					display: flex;
					align-items: center;
					flex-wrap: nowrap;
					box-sizing: border-box;

					.tab-scroll_item {
						line-height: 60rpx;
						margin-right: 35rpx;
						flex-shrink: 0;
						padding-bottom: 10px;
						display: flex;
						justify-content: center;
						font-size: 16px;
						padding-top: 10px;
					}
				}
			}
		}

		.swiper-content {
			padding-top: 90rpx;
			flex: 1;

			.swiperitem-content {
				background-color: $page-bg;

				.nav_item {
					background-color: $page-bg;
					// padding:20rpx 40rpx 0rpx 40rpx ;
				}
			}
		}
	}

	.active {
		position: relative;
		// color: #000000;
		font-weight: 600;
		font-size: 18px !important;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 130rpx;
		height: 4rpx;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}

	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	/deep/.uni-scroll-view::-webkit-scrollbar {
		display: none
	}

	.container_plan {
		// padding: 20rpx;
		position: relative;

	}

	.top_box {
		float: left;
		width: 100%;
		padding-bottom: 120rpx;
	}

	.item {
		margin-bottom: 20rpx;
		background-color: #ffffff;
		padding: 10px;
		border-radius: 5px;
	}

	.field {
		display: flex;
		align-items: center;
	}

	.row {
		flex-direction: row;
	}

	.label {
		font-weight: bold;
		margin-right: 10rpx;
	}

	.value {
		flex: 1;
	}

	.copy {
		/* margin-left: 10rpx; */
		background-color: none;
		border: none;
		color: #333;
		padding: 5rpx 10rpx;
		font-size: 14px;
		margin-left: auto;
		margin-right: 1px;
	}

	.fixed-image {
		position: fixed;
		right: 20px;
		/* 可根据需要调整位置 */
		bottom: 20px;
		/* 可根据需要调整位置 */
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
	}

	.fixed-image image {
		width: 80rpx;
		height: 80rpx;
	}

	.bottom {
		display: flex;
		align-items: center;
		cursor: pointer;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}

	.icon_right {
		width: 20px;
		height: 20px;
		margin-left: auto;
		margin-right: 1px;

	}

	.icon_left {
		width: 20px;
		height: 20px;
	}



	.left {
		display: flex;
		align-items: center;
	}

	.image {
		width: 20px;
		height: 20px;
	}

	.text {
		margin-top: 8rpx;
	}

	.text text {
		background-color: #DCE3FC;
		color: white;
		padding: 2px 4px;
		border-radius: 6px;
		font-size: 12px;
		color: #5A9CFA;
	}

	.text_top {
		font-weight: bold;
	}

	.right {
		display: flex;
	}

	.button_v {
		margin-left: 10px;
		background-color: none;
		border: none;
		color: #333;
		padding: 5rpx 10rpx;
		font-size: 14px;

	}

	.popover {
		position: absolute;
		top: 80px;
		right: 10px;
		width: 120px;
		background-color: #f0f0f0;
		border-radius: 4px;
		z-index: 999;
	}

	.option {
		padding: 12px;
		color: #333;
		font-size: 14px;
	}

	.bottom_text {
		padding-left: 10rpx;
	}

	.bottom_text_style {
		font-size: 12px;
		color: #ccc;
	}

	.popup_icon {
		color: #fff;
		font-size: 14px;
		margin-right: 20px;
		border-radius: 30px;
		width: 25px;
		height: 25px;
		float: left;
		line-height: 25px;
		text-align: center;
		background-color: #B9BBC7;
		margin-bottom: 10px;
	}



	.popup_icon_float_right {
		color: white;
		border-radius: 30px;
		width: 70rpx;
		height: 50rpx;
		background-color: #579CF9;
		line-height: 50rpx;
		text-align: center;
		float: right;
		margin-bottom: 10px;
	}

	.u-grid-item-cls {

		width: 40px;
		height: 40px;
		border-radius: 50%;
		line-height: 40px;
		text-align: center;
		font-size: 16px;
		// margin-bottom: 20px;
		color: white
	}

	.iconClass {
		width: 20px;
		height: 20px;
		margin-top: 10px;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		height: 40vh;
	}

	.scroll-view_H2 {
		white-space: nowrap;
		width: 100%;
	}


	.quadrant_right {
		width: 360rpx;
		margin-top: 10rpx;
		// margin-bottom: 2%;
		height: 47%;
		float: left;
		margin-left: 10rpx;
		font-size: 12px;
		border-radius: 5px;
		background-color: #ffffff;
	}

	.header_right {
		display: flex;
		align-items: center;

		cursor: pointer;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}

	.title_right {

		padding: 3px 5px;
		text-align: left;
	}

	.tasks_right {
		padding: 3px 5px;
		height: 250rpx;
	}

	.contentnav {
		display: flex;
		flex-direction: column;
		width: 100%;
		flex: 1;
		float: left;

		.nav1 {
			z-index: 99;
			width: 100%;
			align-items: center;
			// height: 100rpx;

			.tab-scroll1 {
				flex: 1;
				overflow: hidden;

				.tab-scroll_box1 {
					display: flex;
					align-items: center;
					flex-wrap: nowrap;
					box-sizing: border-box;

					.tab-scroll_item1 {
						flex-shrink: 0;
						display: flex;
						justify-content: center;
						font-size: 14px;
						height: 42rpx;
						line-height: 42rpx;
						color: white;
						margin-right: 10px;
						margin-bottom: 10px;
					}
				}
			}
		}

		.swiper-content {
			padding-top: 90rpx;
			flex: 1;

			.swiperitem-content {
				background-color: $page-bg;

				.nav_item {
					background-color: $page-bg;
				}
			}
		}
	}

	.input-container {
		display: flex;
		align-items: center;
		color: #000;
	}

	.popup-content {
		padding: 60rpx 20rpx;
	}

	.emojifont {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background-color: antiquewhite;
		line-height: 30px;
		text-align: center;
		font-size: 20px;
		margin-right: 10px;
		display: inline-block;
		justify-content: center;

	}



	.color_style {
		height: 50rpx;
		width: 50rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.checkmark {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		background-color: white;

	}

	.nav-list-popup {
		display: flex;
		/* padding: 0rpx 12rpx 0rpx; */
		justify-content: space-between;

		/* 列表元素 start */
		.nav-list-item {
			/* padding: 20rpx 30rpx; */
			border-radius: 12rpx;
			width: 45%;
			/* margin: 0 18rpx 40rpx; */
			background-size: cover;
			background-position: center;
			position: relative;
			z-index: 99;

			/* 元素标题 start */
			.nav-link {
				font-size: 14px;
				text-transform: capitalize;
				/* padding: 0 0 10rpx 0; */
				position: relative;

				.title {
					margin-top: 10rpx;
					text-align: center;
				}
			}

			/* 元素标题 end */

			/* 元素图标 start */
			.icon {
				font-variant: small-caps;
				width: 90rpx;
				height: 90rpx;
				line-height: 90rpx;
				margin: 0;
				padding: 0;
				display: inline-flex;
				text-align: center;
				justify-content: center;
				vertical-align: middle;
				font-size: 50rpx;
				color: #FFFFFF;
				white-space: nowrap;
				opacity: 0.9;
				background-color: rgba(0, 0, 0, 0.05);
				background-size: cover;
				background-position: 50%;
				border-radius: 5000rpx;
			}

			/* 元素图标 end */
		}

		/* 列表元素 end */
	}

	.icon-order {
		font-size: 20px;
	}

	.tb_box_top {
		float: left;
		width: 100%;
		padding: 20rpx 20rpx 20rpx 20rpx;

	}



	.item_box .item {
		float: left;
		width: 25%;
		text-align: left;
		line-height: 25px;

	}

	.item_matter_1 {
		float: left;
		height: 50px;
		line-height: 50px;
		width: 70%;
		display: flex;
	}

	.item_matter {
		float: right;
		width: 20%;
		text-align: right;
		height: 50px;
		line-height: 50px;
		font-weight: bolder;
	}

	.grid-text-matter {
		float: left;
		padding-left: 5px;
		font-weight: bolder;
		width: 90%;
		overflow: hidden;
		text-overflow: ellipsis;
		-ms-text-overflow: ellipsis;
		display: -webkit-box;
		line-clamp: 1;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.u-grid-item-cls-matter {
		width: 8px;
		height: 8px;
		border-radius: 50%;

		text-align: center;
		vertical-align: middle;
		margin-top: 21px;
	}

	.item_box_border_none {
		width: 100%;
		float: left;
	}

	.item_box_border {
		width: 100%;
		float: left;
		border-bottom: 1px solid burlywood;
	}

	.write_btn {
		position: fixed;
		bottom: 50px;
		right: 50rpx;
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 50rpx;
		background-color: $uni-theme-color;
		z-index: 100;
		display: flex;

		.icon {
			justify-content: center;
			// line-height: 100rpx;
			width: 100%;
			color: #FFFFFF;
			font-size: 50rpx;
			// padding-top: 50rpx;
			/* #ifdef MP-TOUTIAO */
			// 头条小程序 没居中
			text-align: center;
			padding: 15rpx 0;
			/* #endif */
		}
	}

	.write_btn_top {
		position: fixed;
		bottom: 130px;
		right: 50rpx;
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 50rpx;
		background-color: #FE6601;
		z-index: 100;
		display: flex;

		.icon {
			justify-content: center;
			width: 100%;
			color: #FFFFFF;
			font-size: 50rpx;
			/* #ifdef MP-TOUTIAO */
			// 头条小程序 没居中
			text-align: center;
			padding: 15rpx 0;
			/* #endif */
		}
	}

	.title_class {

		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		// font-weight: bolder;
	}

	.container_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12rpx 10rpx;

	}

	.container_box_left {
		display: flex;
		align-items: center;
		float: left;
		width: 100%;
		margin: 10px;

	}

	.container_box_left input {
		width: 100%;
		float: left;
	}

	.collapse-item-content {
		word-wrap: break-word;
	}

	.container_box_pop {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		/* border: 1px solid #f1f1f1; */
		margin: 16rpx 0rpx;
	}

	.container_box_left_pop {
		display: flex;
		align-items: center;
		float: left;
		width: 100%;
	}

	.container_box_left_pop input {
		width: 100%;
		float: left;
	}

	.container_box_left_pop image {
		width: 20px;
		height: 20px;
	}

	.container_box_left_pop text {
		// color: #f1f1f1;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.image_v {
		margin-left: auto;
	}



	.tn-time-line-class {
		.tn-time-line-item-class {
			&:first-child {
				.tn-time-line-item__node {
					.time-line-item__node {
						background-color: $tn-main-color !important;
					}
				}
			}
		}
	}

	.time-line {

		&__wrap {
			padding: 30rpx;
		}

		&-item {
			&__node {
				width: 44rpx;
				height: 44rpx;
				border-radius: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #AAAAAA;

				&--active {
					background-color: $tn-main-color;
				}

				&--icon {
					color: #FFFFFF;
					font-size: 24rpx;
				}
			}

			&__content {
				&__title {
					font-weight: bold;
					font-size: 32rpx;
				}

				&__desc {
					color: $tn-font-sub-color;
					font-size: 28rpx;
					margin-bottom: 6rpx;
				}

				&__time {
					color: $tn-font-holder-color;
					font-size: 26rpx;
				}
			}
		}
	}

	.check_btn_icon_blue {

		border: 2px solid #ccc;
		border-radius: 50%;
		line-height: 34rpx;
		color: white;
		background-color: #ccc;
	}

	.check_btn_icon {

		border-radius: 50%;
		line-height: 34rpx;
	}

	.check_btn_icon_4 {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		line-height: 34rpx;
	}

	.item_left_text {
		color: white;
		height: 26px;
		width: 26px;
		line-height: 24px;
		position: absolute;
		top: 10px;
		right: -10px;
	}

	.boxClass {
		width: 18px;
		height: 18px;
		text-align: center;
		line-height: 16px;
		border: 1px solid gray;
		border-radius: 3px;
		display: inline-block;
		margin-right: 5px;
		margin-top: 5px;
	}

	.overflowclass {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.overflowclassSize {
	}

	.category-item-save {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20px;

	}

	.save_btn {
		text-align: right;
		background-color: #5A9CFA;
		color: white;
		width: 90px;
		border-radius: 30px;
		border: none;
		text-align: center;
		height: 36px;
		line-height: 36px;
	}
</style>